<template>
  <div class="skeleton-item">
    <div class="card-img"><q-skeleton style="height:100%;" square /></div>
    <div class="content">
      <div class="tags">
        <q-skeleton type="QBadge" /><q-skeleton type="QBadge" /><q-skeleton
          type="QBadge"
        />
      </div>
      <div class="title"><q-skeleton type="rect" /></div>
      <div class="description">
        <q-skeleton type="rect" />
      </div>
      <div class="footer">
        <q-skeleton type="QBadge" />
        <q-skeleton type="QBadge" />
        <q-skeleton type="QBadge" />
        <q-skeleton type="QBadge" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'postskeleton',
  props: {}
};
</script>
;

<style lang="scss" scoped>
@media screen and (min-width: 0px) {
  .skeleton-item {
    display: flex;
    min-height: 130px;
    margin: 20px 0;
    background: white;
    position: relative;
    border-radius: 5px;
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
    .card-img {
      flex-basis: 30%;
      position: relative;
    }
    .content {
      width: 100%;
      height: 100%;
      align-self: center;
      padding: 5px 10px;
      position: relative;
      .tags {
        width: 50%;
        margin-bottom: 0.5rem;
        min-height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .title {
        margin: 0.5rem 1.5rem;
        min-height: 20px;
      }
      .description {
        padding: 0.5rem;
        min-height: 20px;
      }
      .footer {
        height: 2em;
        line-height: 2em;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .skeleton-item {
    flex-wrap: wrap;

    &:nth-child(even) {
      flex-direction: row-reverse;
    }
    .card-img {
      flex-basis: 100%;
      height: 130px;
    }
  }
}
</style>
